Beginner Game Programming Workshop 

1 Meow game app 

1.1 Interactive sound 

Type in the following code, save it and test it: 

1 function love . load () 

2 sound = love . audio . newSource ( "meowl.ogg" ) 

3 end 

4 

5 function love . mousepressed () 

6 sound : play () 

7 end 

The code in love.loadO loads a sound file, love .mousepressedO plays it when a mouse button is 
pressed or the touchscreen is touched. 

1.2 Interactive image 

Add the loading of two images to love . load() : 

1 bild_auf = love . graphics . newlmage ( "open. png" ) 

2 bild_zu = love . graphics . newlmage ( "closed. png" ) 

Insert the following two functions to your code: 

1 function love . update () 

2 bild_aktuell = bild_zu 

3 if sound : isPlaying () then bild_aktuell = bild_auf end 

4 end 

5 

6 function love.drawQ 

7 love . graphics . draw ( bild_aktuell , 0, 0 ) 

8 end 

love .update () calculates, which of the images is the current one. love.drawO draws it. Both 
functions work 60 times per second. The image doesn’t quite fit but we will take care of that later. 

1.3 Random meow sounds 

Add the following random generator initiator and list (or table) of sounds to love.loadO: 
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7 } 

8 math . randomseed ( os .time () ) 



Replace the content of love .update () with code, which uses the sound list: 

1 bild_aktuell = bild_zu 

2 for i,u in pairs ( soundliste ) do 

3 if u : isPlaying () then bild_aktuell = bild_auf end 

4 end 

Replace the content of love .mousepressedO with code which plays random sounds: 

1 wahl = math . random ( 1 , 5) 

2 soundliste [wahl] : stop () 

3 soundliste [wahl] : play () 
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1.4 Adapt to different screens 

Add calculations of the relations between image and window size to love. load (): 

1 fx = love . graphics . getWidth () / 1024 

2 fy = love . graphics . getHeight () / 600 

Add scaling parameters to the love . graphics . draw () function call in love.draw(): 

i love . graphics . draw (bild_aktuell , 0, 0, 0, fx , fy) 

The image fits to the screen size this way, since mobile phones/tablets only have one resolution. This 
is not optimal but a simple solution for the start. 

1.5 Android port 

If you would like to put own graphics (you can draw on the computer or on paper) and sounds into your 
meow game app, tell the workshop coaches. You can also change the app icon. 

We recommend to code the "back" button to close the Android app: 

1 function love . keypressed ( key ) 

2 if key == "escape" then love . event . quit () end 

3 end 

To make the app playable on Android, a zip archive of the game has to be made, it must be renamed 
to game . love and put into the project directory. Then use the make-apk script. The resulting game . apk 
must then be put on the mobile phone/tablet and installed there. Let workshop coaches help you. 

2 Cat and mouse game app 

2.1 Image and sound 

Type in the following code (without — comments), save it and test it: 

1 function love . load () 

2 math . randomseed ( os .time () ) -- For random numbers 

3 love . window . setMode ( 1280, 720) -- Changes screen size 

4 grasBild = love . graphi cs . newlmage ( "gras. png" ) 

5 katzeBild = love . graphi cs . newlmage ( "katze.png" ) 

6 mausBild = love . graphi cs . newlmage ( "maus .png" ) 

7 katzeX = 400 -- Position of the cat 

8 katzeY = 300 

9 mausX = 300 -- Position of the mouse 

10 mausY = 150 

11 musik = love . audio . newSource ( "musik.ogg" ) 

12 musik : setLooping ( true ) 

13 musik : play ( ) 

14 end 

15 

16 function love.drawQ 

17 love . graphics . draw ( grasBild, 0,0) 

is love . graphics . draw ( katzeBild, katzeX, katzeY ) 

19 love . graphics . draw ( mausBild, mausX, mausY ) 

20 end 

The code in love. load () changes the screen resolution, loads the images and music, sets position 
variables and plays the rnsuic. love. draw () draws the images, 60 times per second. They don’t quite 
fit but we will take care of that later. 
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2.2 Automatic and interactive movement 



Add mouse click position variables and sounds to love. load (): 

1 klickX = 400 

2 klickY = 300 

3 quietsch = love . audio . newSource ( " quietsch . ogg " ) 

4 miau = love . audio . newSource ( "miau.ogg" ) 

Add the following three functions to your code: 

1 function distanz( xl , yl , x2 , y2 ) 

2 a = xl - x2 

s b = yl - y2 

4 return! math.sqrt( a~2 + b~2 ) ) 

5 end 

6 

7 function love . update () 

8 mausX = mausX + 7 

9 if mausX > 800 then 

10 mausX = -48 

n mausY = math. random ( 20, 400 ) 

12 end 

13 if distanz ( katzeX , katzeY , mausX , mausY ) < 40 then 

14 quietsch : play () 

is mausX = 999 

16 end 

17 if distanz ( katzeX , katzeY , klickX , klickY ) > 8 then 
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25 end 

26 end 

27 

28 function love . mousepressed ( x, y ) 

29 klickX = x 

30 klickY = y 

31 miau : play () 

32 end 

The distanz () function calculates the distance between two dots thanks to the Pythagoras’ theorem 
or the formula c = \J o? + b 2 . 

love .update () 1. Moves the mouse, 2. Puts the mouse back, after it crosses the right border or 
3. when cat and mouse touch, 4. moves the cat 

The code in love .mousepressedO changes the klickX and klickY variables each time a mouse 
button is pressed or the touchscreen is touched. 
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2.3 Screen size 

Add calculations of the relations between image and window size to love. load (): 

1 fx = love . graphics . getWidth () / 800 

2 fy = love . graphics . getHeight () / 450 

Add scaling parameters to the love . graphics . draw () function call in love.drawC): 

1 love . graphics . draw ( grasBild , 0, 0, 0, fx , fy ) 

2 love . graphics . draw ( katzeBild , katzeX * fx , katzeY * fy , 0, f x , fy ) 

3 love . graphics . draw ( mausBild , mausX * f x , mausY * fy , 0, f x , fy ) 

Ersetze die Variablenzuweisungen in love .mousepressedO , um vom Bildschirm aufs Spielefeld zu 
projezieren: 

1 klickX = x/fx 

2 klickY = y/fy 

2.4 Score and time 

Add image sizes, font configuration, time and score to love.load(): 

1 breite = love . graphics . getWidth () 

2 hoehe = love . graphics . getHeight () 

3 love. graphics. setNewFont(hoehe/15) 

4 zeitStart = lo ve . t imer . getT ime ( ) 

5 zeit = 30 

6 punkte = 0 

Add time calculaation to love .update () : 

i zeit = 30 - math . f loor ( love . t imer . getT ime ( ) - zeitStart) 

Add a score counter to the one if block in love. update () which reacts to cat and mouse touching: 

1 if zeit > 0 then 

2 punkte = punkte + 1 

3 end 

Add displaying time and score to love.drawC): 

1 text = "Zeit : " . . zeit . . ", Punkte : " . . punkte 

2 love . graphics . printf (text , 0, 0, breite, "center") 

You should put the content of love. update () into a if zeit > 0 then . . . end block to stop 
the game after the time runs out. You can use a similar block in love . draw() to display a "Game Over!" 
message. 

2.5 Android port 

See section 1.5. 
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3 Matrix music DJ app 

Type in the following code (without — comments), save it and test it: 

function love . load () 

la, lg = love. audio, love . graphics 

math . randomseed ( os .time () ) -- For random numbers 

namen = { "lead", "drums", " drumsb " , "clap" } 
instr = {{},{}} -- Table of instruments with. . . 

for i = 1 , 2 do -- two rows and. . . 

for j = 1, #namen do -- four columns 
instr [i] [ j ] = {} 

instr [i][j].snd = la.newSource ( namen [j] .. i .. ".ogg" ) 

instr [i][j].snd:setLooping( true ) -- Endless looping on 

instr [i] [j ]. snd : setVolume ( 0 ) -- Loudness to 0 

instr [i] [j] ,snd:play() -- Track playback starts 

instr [i][j].farbe = { 60*j, math.random(200), 200 } 
end 
end 

spalten , zeilen = #instr[l] , #instr 
breit , hoch = lg . getWidth () , lg . getHeight () 
feldb , feldh = breit / spalten, hoch / zeilen -- 
end 
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function love.drawQ 

for i, zeile in ipairs ( instr ) do -- i is the index, zeile is the value 

for j, instrument in ipair s ( ze ile ) do 

lg . setColor ( instrument . farbe ) -- Instruments have own colors 

lg . rectangle ( "fill", (j-1) * feldb, ( i — 1 ) * feldh, feldb, feldh ) 

if instrument . snd : getVolume () == 1 then 

lg.setColor( 255, 255, 255, 95 ) -- on/off state is displayed 

lg. circle ( "fill", (j-0.5) * feldb, (i-0.5) * feldh, feldb*0.4 ) 
end 
end 
end 
end 

function love . mousepressed (x , y) -- Gets started by mouse/ touchscreen 

wob = math.ceilC x / feldb ) -- Calculating column 

woh = math.ceilC y / feldh ) -- Calculating row 

if instr [woh] [wob] . snd : getVolume () == 1 then 

instr [woh] [wob]. snd: setVolume CO) -- Loudness 0 % 
else 

instr [woh] [wob] . snd : setVolume (1) --Loudness 100 % 
end 
end 

The code makes intense use of tables/lists and for loops as well as calculations, which might need a 
bit more time to be understood. Feel free to ask coaches for help. 



3.1 Android port 

See section 1.5. 
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4 Epilogue 



LOVE draws pictures and shapes using positions in a coordinate system, which originates from the top 
left corner towards right and down. 




LOVE is the game engine used in this workshop. More information about LOVE programming is available 
at love2d.org/wiki/love . 

Additional workshop material is available at espws.de/en . 




©2015 Iwan Gabovitch, Einstieg Spiele-Programmierung Workshop. 

This document is licensed under a Attribution- Share Alike 4-0 International Public License. 
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